<template>
  <div class="container">
    <div class="title">XXX小院基本信息</div>
    <components :is="formMode"></components>
    <el-row type="flex" justify="end">
      <el-button
        v-if="isReadOnlyForm"
        type="primary"
        size="mini"
        @click="toggleFormMode"
        >编辑</el-button
      >
      <el-button
        v-if="!isReadOnlyForm"
        type="primary"
        size="mini"
        @click="toggleFormMode"
        >提交修改</el-button
      >
      <el-button v-if="!isReadOnlyForm" size="mini" @click="toggleFormMode"
        >取消</el-button
      >
    </el-row>
  </div>
</template>

<script>
import ReadOnlyForm from "./components/ReadOnlyForm.vue"
import EditForm from "./components/EditForm.vue"
export default {
  components: {
    ReadOnlyForm,
    EditForm
  },
  data() {
    return {
      formMode: "ReadOnlyForm" // 默认只读模式
    }
  },
  computed: {
    isReadOnlyForm() {
      return this.formMode === "ReadOnlyForm"
    }
  },
  methods: {
    toggleFormMode() {
      this.formMode =
        this.formMode === "ReadOnlyForm" ? "EditForm" : "ReadOnlyForm"
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./styles/common.scss";
</style>
